<template>
	<view class="orderDetail">
		<view class="cont1">
			<text>{{orderState}}</text>
		</view>
		<view class="cont2">
			<view>
				配送信息
			</view>
			<view class="cont3">
				<text class="t1">收货地址: </text>
				<view class="t2">
					<text>{{OrderAdress.name}} {{OrderAdress.phone}}</text>
					<text>{{OrderAdress.address}}</text>
				</view>
			</view>
		</view>
		<view class="cont4">
			<view class="goods">
				商品信息
			</view>
			<view class="cont3">
				<image class="t1" :src="goods.src"></image>
				<view class="t2">
					<text>{{goods.goodsName}}</text>
					<view class="jifen">
						<span class="span2"> {{goods.jifen}}积分
						<span class="span3"> x {{goods.count}}</span> 
						</span>
					</view>
					<span >商品总价
						<span class="span3"> {{goods.jifen}}积分</span> 
					</span>
					<span >配送费 
						<span class="span3"> ￥ 0.00</span> 
					</span>
				</view>
			</view>
		</view>
		<view class="price">实付 <span style="color:orangered"> {{order.jifen}} </span> 积分  </view>
		<view class="foot">
			<span>订单信息</span>
			<text>订单编号：{{order.orderNum}}</text>
			<text>下单时间：{{order.orderTime}}</text>
			<text>支付方式：{{order.payWay}}</text>
			<text>付款时间：{{order.payTime}}</text>
			<text>发货时间：{{order.fhtime}}</text>
		</view>	
		<view class="foot1" v-if="orderState == '待收货'">
			<span>物流信息</span>
			<text>物流公司：{{order.company}}</text>
			<text>发货时间：{{order.distr_time}}</text>
			<text>运单号：{{order.distr_num}}</text>
		</view>
		<view class="btn" v-if="orderState == '待付款'">
			<button @click="cancelOrder" plain='true' class="refund1">取消订单</button>
			<button @click="pay" plain='true' class="refund1">去付款</button>
		</view>
			<view class="btn" v-if="orderState == '待发货'||orderState == '待收货'">
					<button @click="refund()" plain='true' class="refund">申请退款</button>
			</view>
		<view>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad: function (option) { 
			// console.log(option.id)//option为object类型，会序列化上个页面传递的参数
			// this.order.id = option.id
				// console.log(JSON.parse(decodeURIComponent(option.goods)))
				const item = JSON.parse(decodeURIComponent(option.goods)); //打印出上个页面传递的参数。
					if(item.status==1){
						this.orderState = '待付款'
					}else if(item.status==2){
						this.orderState = '待发货'
					}else if(item.status==3){
						this.orderState = '待收货'
					}else if(item.status==0){
						this.orderState = '已退款'
					}else{
						this.orderState = '已完成'
					}
					this.OrderAdress.name = item.user
					this.OrderAdress.phone = item.phone
					this.OrderAdress.address = item.address
					this.goods.src = item.goods_imgs
					this.goods.goodsName = item.goods_name
					this.goods.jifen = item.goods_jf
					this.goods.id = item.goods_id
					this.goods.count = item.goods_num
					this.goods.size = item.value
					this.order.id = item.id
					this.order.jifen =  item.order_jf
					this.order.orderNum =  item.order_id
					this.order.payWay =  item.paytype
					this.order.orderTime =  item.create_time
					this.order.payTime =  item.paytime
					this.order.fhtime =  item.distr_time
					this.order.company = item.company
					this.order.distr_time = item.distr_time
					this.order.distr_num = item.distr_num
					},
		data() {
		
			return {
				isShow:false,
				password:'',
				// 待付款时，去付款按钮显示状态
				ok:false,
				// 订单状态数据
				orderState:'',
				// 收货地址数据
				OrderAdress:{
					name:'张三',
					phone:'13408163621',
					address:'四川省 成都市 武侯区'
				},
				// 商品信息数据
				goods:{
					id:'',
					src:'',
					goodsName:'福满园泰国乳胶枕头护颈椎助睡眠',
					jifen:'4900',
					count:'1'
				},
				order:{
					id:0,
					jifen:'',
					orderNum:'',
					orderTime:'',
					payWay:'',
					payTime:'',
					fhtime:'',
					status:''
				}
			}
		},
		methods: {
			// 取消订单，弹框确认后，删除订单信息
			cancelOrder(){
				wx.showModal({
				  content: '确认删除订单',
				  success :(res)=>{
				    if (res.confirm) {
					  // 点击确定发起请求删除订单
						  uni.request({
							url:'http://localhost:3001/idDelet',
							data:{
								id:this.order.id
							},
							method:'post',
							success:(res)=>{
								wx.showToast({
								  title: '删除订单成功',
								  icon: 'success',
								  duration: 1000
								})
								uni.switchTab({
									url:'/pages/index/index'
								})
							},
						  })
				    } else if (res.cancel) {
				      // console.log('用户点击取消')
				    }
				  }
				})
				
			},
			// 点击去付款打开立即支付窗口
			pay(){
				let id = this.order.id
				uni.navigateTo({
					url:'/pages/PayNow/PayNow?id='+id
				})
			},
			// 申请退款
			refund(){
				uni.showModal({
					title: '确认退款',
					success:(res)=>{
						if (res.confirm) {
							// console.log(this.order.id);
							// console.log(uni.getStorageSync('userInfo'))
							uni.request({
								url:"http://localhost:3001/refund",
								data:{
									id:this.order.id,
									userName:uni.getStorageSync('userInfo')
								}
							}).then((res)=>{
								console.log(res);
								uni.reLaunch({
									url:'/pages/orderList/orderList'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
	}
</script>

<style scoped lang="less">
	.orderDetail{
		width: 750rpx;
		background-color:rgb(247,246,246);
		font-size: 28rpx;
	}
	.cont1{
		background: linear-gradient(320deg, #F89945, #F7696E);
		padding-left: 40rpx;
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		box-sizing: border-box;
		text{
			font-size: 36rpx;
			color: white;
		}
		
	}
	.cont2{
		width: 680rpx;
		height: 224rpx;
		background-color: white;
		margin: 20rpx auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}
	.cont4{
		width: 680rpx;
		height: 300rpx;
		
		background-color: white;
		margin: 20rpx auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}
	.cont3{
		padding: 20rpx 0rpx;
		display: flex;
		.t1{
			width: 200rpx;
			color: black;
			font-size: 24rpx;
		}
		view{
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: grey;
			line-height: 40rpx;
		}
	}
	image{
		width: 100rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}
	.jifen{
		padding: 20rpx 0rpx;
		color: red;
	}
	.span2{
		color: red;
	}
	.span3{
		padding-left: 180rpx;
		color: gray;
		width: 200rpx;
	}
	.price{
		margin: 20rpx auto;
		width: 680rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: white;
		text-align: right;
		color: black;
		font-size: 28rpx;
	}
	.foot{
		margin: 10rpx auto;
		padding: 20rpx 10rpx;
		width: 680rpx;
		height: 430rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		box-sizing: border-box;
		// border:1px red solid;
		span{
			color: black;
			font-size: 28rpx;
		}
		text{
			font-size: 24rpx;
			color: grey;
		}
	}
	.foot1{
		margin: 0 auto;
		padding: 20rpx 10rpx;
		width: 680rpx;
		height: 330rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		box-sizing: border-box;
		// border:1px red solid;
		span{
			color: black;
			font-size: 28rpx;
		}
		text{
			font-size: 24rpx;
			color: grey;
		}
	}
	.btn{
		width: 750rpx;
		text-align: center;
		display: flex;
		padding-top: 40rpx;
		
	}
	button{
		width: 200rpx;
		height: 60rpx;
		font-size: 28rpx;
		border: none;
	}
	.popup-content{
		height: 250rpx;
		border-radius: 10rpx;
	}
	.ensure{
		display: flex;
		justify-content: space-around;
	}
	.mybtn{
		margin: 10rpx 0rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 150rpx;
		background-color: orangered;
		color: white;
		font-size: 26rpx;
		border-radius: 10rpx;
	}
	.uni-common-mt{
		margin: 40rpx 0rpx;
		box-sizing: border-box;
	}
	.refund{
		margin-bottom: 50rpx;
		height: 60rpx;
		width: 680rpx;
		line-height: 60rpx;
		background-color: #f7803b;
		color: white;
		box-sizing: border-box;
	}
	.refund1{
		margin-bottom: 50rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #f7803b;
		color: white;
		box-sizing: border-box;
	}
</style>
